<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<div class="list-agents" layout="column">

  <div ng-if="listAgentsController.agentsList.length > 0">

    <che-list-header>
      <div flex="100" layout="row" layout-align="start stretch" class="che-list-item-row">
        <div layout="row" layout-align="start center">
        </div>
        <div flex hide-xs layout-gt-xs="row" layout-align="start center" class="che-list-item-details">
          <che-list-header-column flex="30" che-column-title="AGENT"></che-list-header-column>
          <che-list-header-column flex="20" che-column-title="STATE"></che-list-header-column>
          <che-list-header-column flex="50" che-column-title="DESCRIPTION"></che-list-header-column>
        </div>
      </div>
    </che-list-header>

    <che-list flex>
      <che-list-item ng-repeat="agent in listAgentsController.agentsList | orderBy: 'id'">
        <div flex="100" layout="row" layout-align="start stretch" class="agent-item-row">
          <div flex layout-xs="column" layout-gt-xs="row" layout-align-gt-xs="start center" layout-align-xs="start start" class="che-list-item-details">
            <div flex="30" class="che-agent-item-name">
              <span>{{agent.name}}</span>
            </div>
            <div flex="20">
              <div>
                <md-switch ng-model="agent.isEnabled"
                           ng-disabled="listAgentsController.needToDisable(agent.id)"
                           ng-change="listAgentsController.updateAgent(agent)"
                           aria-label="Agent">
                </md-switch>
              </div>
            </div>
            <div flex="50" class="agent-description">
              <span>{{agent.description}}</span>
            </div>
          </div>
        </div>
      </che-list-item>
    </che-list>

  </div>

  <div class="che-list-empty">
    <span ng-show="listAgentsController.agentsList.length === 0">There are no available agents.</span>
  </div>

</div>

